<template>
  <div class="cost">
    <van-nav-bar
        left-arrow
        @click-left="onClickLeft"
        title="水电费管理"
    />
    <div class="top-btn">
      <van-button type="primary" color="#1e98dc" block round @click="goAdd">新增记录</van-button>
    </div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <div class="cost-title">
        <van-row>
          <van-col span="8">
            日期
          </van-col>
          <van-col span="8">
            水
          </van-col>
          <van-col span="8">
            电
          </van-col>
        </van-row>
      </div>
      <div v-for="item in list" :key="item.id" class="cost-row van-hairline--bottom">
        <van-row>
          <van-col span="8">
            {{ item.costDate|formatDate }}
          </van-col>
          <van-col span="8">
            {{ item.water }}
          </van-col>
          <van-col span="8">
            {{ item.electric }}
          </van-col>
        </van-row>
      </div>
      <van-loading type="spinner" color="#1989fa" v-if="loading"/>
      <div class="get-more">
        <label v-if="finished">没有更多了</label>
        <label v-if="!finished">上滑获取更多</label>
      </div>

    </van-pull-refresh>

  </div>
</template>

<script>
import {costList, costAdd} from "@/api/operator";
import {getLocalOpenId} from "@/utils/wxUtil";
import {formatDateNoH} from "@/utils";

export default {
  data() {
    return {
      list: [],
      refreshing: false,
      loading: false,
      finished: false,
      operatorId: getLocalOpenId(),
      queryParams: {
        machineId: this.$route.query.id,
        pageNum: 1,
        pageSize: 10
      },
      total: 0
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    getList() {
      this.loading = true
      costList(this.queryParams).then(res => {
        this.loading = false
        this.total = res.total
        if (res.rows) {
          res.rows.forEach((item, index, arr) => {
            this.list.push(item)
          })
        }
        if (this.list.length >= this.total) {
          this.finished = true
        }
      })
    },
    scrollLoad() {
      this.$nextTick(() => {
        window.onscroll = () => {
          // 变量scrollTop是滚动条滚动时，距离顶部的距离
          var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
          // 变量windowHeight是可视区的高度
          var windowHeight = document.documentElement.clientHeight || document.body.clientHeight
          // 变量scrollHeight是滚动条的总高度
          var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
          // 滚动条到底部的条件
          if (scrollTop + windowHeight == scrollHeight && scrollHeight > 600) {
            // console.log(scrollTop + windowHeight, scrollHeight)
            // 写后台加载数据的函数

            if (!this.finished && !this.loading && !this.refreshing && this.total > 10) {
              this.queryParams.pageNum = this.queryParams.pageNum + 1
              this.getList()
            }
          }
        }
      })
    },
    nextFun() {
      if (!this.finished && this.total > 10) {
        this.queryParams.pageNum = this.queryParams.pageNum + 1
        this.getList()
      }
    },
    onRefresh() {
        this.refreshing = false
        this.queryParams.pageNum=1
        this.finished=false
        this.list = []
        this.getList()
    },
    goAdd() {
      this.$router.push({
        path: '/operator/machine/costAdd',
        query: {
          id: this.queryParams.machineId
        }
      })
    }
  },
  filters: {
    formatDate(value) {
      return formatDateNoH(value)
    }
  },
  created() {
    this.getList()
  },
  mounted() {
    this.scrollLoad()
  }
}
</script>

<style lang="less" scoped>
.cost {
  text-align: center;
  padding: 10px 10px 30px 10px;

  .cost-title {
    padding: 5px;
  }

  .cost-row {
    padding: 5px;
  }
  .get-more{
    padding-top: 10px;
    font-size: 12px;
    color: grey;
  }
}
</style>
